
.menu {
   background-color: #EEEEEE;		/* very light gray (~gainsboro)*/
   border: 1px solid #CFCFCF;		/* ~silver */
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);	/* gray mist */
   color: #000000;			/* black */
   font-size: medium;
   font-style: normal;
   font-weight: normal;
   margin: 0;
   padding: 4px 8px;
   position: fixed;
   z-index: 1;
   white-space: nowrap;
   list-style-type: none;
   visibility: hidden;
}

.menu li:hover {
   color: #FFFFFF;			/* white */
   background-color: #FFB886;		/* orange-tan (~light salmon)*/
}

.menu-arrow:before {
    content: '\00a0';  /* unicode NO-BREAK SPACE */
}
.menu-arrow:after {
   border-bottom: 8px solid rgba(0,0,0,0);	/* transparent*/
   border-left: 16px solid #A0A0A0;		/* ~dark gray */
   border-top: 8px solid rgba(0,0,0,0);	/* transparent */
   content: '';
   float: right;
   height: 0;
   width: 0;
}

.tooltip {
   background-color: #FFFFD6;
   border: 1px solid #CFCFCF;  /* ~silver */
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);	/* gray mist */
   color: #000000;
   font-size: medium;
   font-style: normal;
   font-weight: normal;
   margin: 0;
   padding: 16px;
   position: absolute;
   z-index: 1;
   white-space: nowrap;
   list-style-type: none;
   visibility: visible;
}

.top-right-menu {
  position: absolute;
  right: 0;
  top: 0;
  margin: 10px;
}
a:link .trm-blue { color: #2196f3; }
a:visited .trm-blue { color: #2196f3; }
a:hover .trm-blue { color: #2196f3; }
a:active .trm-blue { color: #2196f3; }
a:link .trm-black { color: #000000; }
a:visited .trm-black { color: #000000; }
a:hover .trm-black { color: #000000; }
a:active .trm-black { color: #000000; }

